<template>
    <div class="drag-sorting-container">
        <div
            @dragstart="dragstart($event, item.id)"
            @dragover.prevent="dragover($event, item.id)"
            @dragend.prevent="dragend($event, item.id)"
            :draggable="true"
            class="item"
            v-for="item in list"
            :key="item.id"
        >
            {{ item.name }}
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    props: {},
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: "小白",
                },
                {
                    id: 2,
                    name: "小黑",
                },
                {
                    id: 3,
                    name: "小黄",
                },
                {
                    id: 4,
                    name: "小紫",
                },
                {
                    id: 5,
                    name: "小粉",
                },
            ],
            currentDragDom: null,
            currentDragId: 0,
        };
    },
    created() {},
    mouted() {},
    computed: {},
    watch: {},
    methods: {
        dragstart(e, id) {
            //开始拖动时，记录拖动的元素
            this.currentDragDom = e.target;
            this.currentDragId = id;
        },
        dragover(e, id) {
            const overDom = e.target;
            //获取被盖住的元素的尺寸信息
            const rect = overDom.getBoundingClientRect();
            //被盖住的元素如果是本元素，或者非item类的元素，则不处理
            if (overDom.className !== "item" || overDom === this.currentDragDom)
                return;

            let dragDom = this.list.find((item) => {
                return item.id === this.currentDragId;
            });
            //根据正在被拖拽的元素对象id删除本身数据
            this.list.splice(
                this.list.findIndex((item) => item.id === this.currentDragId),
                1
            );
            //如果鼠标位置在被盖住的元素中线以上，则插入上方，如果在中线以下，插入下方
            if (e.clientY - rect.top < rect.height / 2) {
                this.list.splice(
                    this.list.findIndex((item) => item.id === id),
                    0,
                    dragDom
                );
            } else {
                this.list.splice(
                    this.list.findIndex((item) => item.id === id) + 1,
                    0,
                    dragDom
                );
            }
        },
        dragend() {
            this.currentDragDom = null;
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixins.less";

.drag-sorting-container {
    .self-center();
    width: 500px;
    height: 500px;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.32);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.332);
    background-color: #fff;
    .item {
        width: 300px;
        height: 50px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
        border-radius: 10px;
        &:hover {
            opacity: 0.7;
        }
    }
}
</style>
